<script setup lang="ts">
import {getLoginLogListApi} from "@/apps/admin/api/administer/login-log"
import {useHttpPagingResult} from "@/hooks/http"
import {ref} from "vue";
import {TableColumn} from "@/components/AppTable/TableType";
import {SYSTEM_OS} from "@/units/constant";
import {depauthUserFilterData} from "@/apps/admin/api/filter";

const os:any[] = SYSTEM_OS.map(item => {
  return {label: item, value: item}
})

const where = ref({
  sort: '',
  user_id:'',
  ip: '',
  os: '',
  browser: '',
  time: []
})

/**
 * hook获取数据
 */
const {pagination, list, loading, getRequestData} = useHttpPagingResult(function (query) {
  return getLoginLogListApi({...query, ...where.value});
})

const columns: Array<TableColumn> = [
  {prop: "id", label: "id", width: 100},
  {prop: "user", label: "帐号", minWidth: 120, type: 'json', property: 'nickname'},
  {prop: "os", label: "系统", minWidth: 120},
  {prop: "browser", label: "浏览器", minWidth: 160},
  {prop: "ip", label: "IP地址", minWidth: 150},
  {prop: "ascription", label: "IP归属", minWidth: 150},
  {
    prop: "type", label: "登录方式", minWidth: 130, render: (row: any) => {
      return row.type === 'pwd' ? '密码登录' : '授权码登录'
    }
  },
  {prop: "time", label: "登录时间", type: "timestramp", minWidth: 170}
]
</script>

<template>
  <div>
    <data-card>
      <search-form :disabled="loading" label-width="45px" @search="getRequestData({page:1,size:pagination.size})">
        <el-form-item label="操作IP">
          <el-input clearable v-model.trim="where.ip" placeholder="操作IP"/>
        </el-form-item>
        <el-form-item label="登录人员">
          <search-panel v-model="where.user_id" v-bind="{...depauthUserFilterData}" :query={status:1} width="720px"/>
        </el-form-item>
        <template #more>
          <el-form-item label="系统">
            <select-input v-model.trim="where.os" :data="os" maxlength="20"></select-input>
          </el-form-item>
          <el-form-item label="浏览器">
            <el-input v-model.trim="where.browser" maxlength="20"></el-input>
          </el-form-item>
          <el-form-item label="时间">
            <date-range v-model="where.time"/>
          </el-form-item>
        </template>
      </search-form>
    </data-card>
    <data-card class="app-margin-top-interval" title="登录日志">
      <div class="app-margin-top-interval">
        <app-table v-model:sort="where.sort" height="calc(var(--ach) - 220px)" :columns="columns" :data="list" :pagination="pagination" :loading="loading" @reload="getRequestData"></app-table>
      </div>
    </data-card>
  </div>
</template>